<template>
    <header class="navbar">
      <div class="nav-wrap-left">
        <div class="react back" @click="$router.go(-1)">
        <i class="text-icon icon-back"></i>
        </div>
      </div>
      <h1 class="nav-header">猫眼电影</h1>
      <div class="nav-wrap-right">
        <a
          ><span><i></i></span
        ></a>
      </div>
    </header>
    <div class="Mybox">
        <div class="top">
            <!-- <van-image class="bg" :src="tool.getAssetsFile(`top.png`)" fit="cover" /> -->
            <div class="ico">
                <van-icon size="22" color="#fff" @click="$router.go(-1)" name="arrow-left" />
            </div>
                <!-- <van-image width="260" class="logo" :src="tool.getAssetsFile(`logo22.png`)" fit="cover" /> -->
        </div>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field
                v-model="username"
                name="name"
                label="用户名"
                placeholder="请输入帐号"
                :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="请输入密码"
                :rules="[{ required: true, message: '请填写密码' }]"
                />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button   @click="onSubmit" round block type="primary" native-type="submit">
                登录
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup>

import { ref, } from "vue";
// import tool from '@/api/tool'
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { showSuccessToast, showFailToast, } from 'vant';

const route = useRoute();
const router = useRouter();

const username = ref('beyond');
const password = ref('');

const sjc = ref(false);

const onSubmit = (values) => {
        if(values['name'] == 'beyond' && values['password'] == '123456'){
            if(JSON.parse(localStorage.getItem('timestamp')) == null){
                const sevenDaysLater = Date.now() + 7 * 24 * 60 * 60 * 1000;
                localStorage.setItem('timestamp',JSON.stringify(sevenDaysLater))
            }else{
                const timestamp = JSON.parse(localStorage.getItem('timestamp'))
                console.log(timestamp);
                if(Date.now() > timestamp){
                    localStorage.removeItem('timestamp');
                }
            }
            sjc.value = true;
            showSuccessToast('登录成功')
            router.go(-1)
    }else{
        showFailToast('密码错误');
    }
    };



</script>

<style lang="scss" scoped>
.navbar {
  height: 50.5px;
  color: #fff;
  border-bottom: none;
  background-color: #df2d2d;
  display: -webkit-box;
  position: relative;

  .nav-wrap-left {
    position: absolute;
    height: 1.01rem;
    line-height: 1.01rem;
    a.back {
      padding: 0 0.3rem;
      .text-icon.icon-back {
        width: 0.45rem;
        height: 0.45rem;
        vertical-align: middle;
        position: relative;
        :before {
          content: "";
          display: block;
          position: absolute;
          left: 0.07rem;
          top: 0;
          width: 0.25rem;
          height: 0.25rem;
          border-bottom: 0.02rem solid #fff;
          border-left: 0.02rem solid #fff;
        }
      }
    }
  }
  h1.nav-header {
    display: block;
    -webkit-box-flex: 1;
    font-size: 18px;
    font-weight: lighter;
    text-align: center;
    line-height: 50px;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
.Mybox {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    height: 100vh;
    background-color: #fff;

    .top {
        width: 100vw;
        height: 200rem;
        // background-color: beige;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        padding: 0 10rem;
        z-index: 10;
        text-align: center;
        .ico {
            padding: 10rem 0;
            text-align: left;
        }

        .bg {
            width: 95%;
            height: 190rem;
            border-radius: 0 0 500rem 500rem;
            transform: scale(1.7, 1.5);
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        .logo{
            // filter: brightness(100);
            margin-top: 20rem;
        }
    }
    :deep(.van-button--primary){
      background-color: #df2d2d;
    }
    :deep(.van-field__left-icon .van-icon){
        margin: 10rem 0;
        color: #df2d2d;
    }
    :deep(.van-field__error-message){
        white-space: nowrap;
    }
    :deep(.van-cell__value){
        display: flex;
        align-items: center;
        margin-left: 5rem;
        font-size: 1rem !important;
    }
}
</style>